<template>
  <div class="page adaofu-rank">
    <div class="container">
      <div class="personal">
        <div class="avatar">
          <img :src="playerInfo.account.headimgurl" mode="aspectFit"/>
        </div>
        <div class="detail">
          <div class="title">{{playerInfo.account.nickname}}的香氛店</div>
          <div class="detail-bottom">
            <div class="btn" @click="onGoHome">进入我的店面</div>
            <div class="rank" v-if="rank <= 100">全国榜排名：{{rank}}名</div>
          </div>
        </div>
      </div>
      <div class="banner">
        <swiper
          :indicator-dots="true"
          :autoplay="true">
          <swiper-item v-for="(item, i) in ads" :key="i">
            <img :src="item.image" mode="widthFix"/>
          </swiper-item>
        </swiper>
      </div>
      <div class="nav">
        <div class="nav-border" :style="menuBg"></div>
        <div class="nav-inner">
          <div :class="{ active: currentNav === 0 }" @click="onRankMenuClick(0)">全国榜</div>
          <div :class="{ active: currentNav === 1 }" @click="onRankMenuClick(1)">好友榜</div>
        </div>
      </div>
      <div class="intro">
        <p>与好友进行店铺互访，即可查看彼此的经营信息哦~</p>
        <div>
          <button open-type="share">
            <i></i>
          </button>
        </div>
      </div>
      <div class="total">
        <p>统计截止至11月11日23:59</p>
        <p>全国榜排行第一名获得iPhone XS Max一台；</p>
        <p>全国榜排行前三名获得“让你一生道香萦绕”奖励；</p>
        <p>全国榜排行前三十名将获得阿道夫新品精油香沐慕斯一瓶。</p>
      </div>
      <div class="big-list">
        <div class="list-item"
          v-for="(item, i) in resultList" :key="i"
          v-if="i < 2"
          @click="onListClick(item)">
          <div class="image">
            <img :src="item.headimgurl" mode="aspectFit"/>
            <span>{{item.rank}}</span>
          </div>
          <div class="detail">
            <div class="name">
              <i></i>
              <span>{{item.nickname}}</span>
            </div>
            <div class="text">历史鲜花数量：{{item.flowers_history}}</div>
          </div>
        </div>
      </div>
      <div class="small-list">
        <div class="list-item"
          v-for="(item, i) in resultList" :key="i"
          v-if="i > 1"
          @click="onListClick(item)">
          <div class="order">{{item.rank}}</div>
          <div class="image">
            <img :src="item.headimgurl" mode="aspectFit"/>
          </div>
          <div class="detail">
            <div class="name">
              <i></i>
              <span>{{item.nickname}}</span>
            </div>
            <div class="text">历史鲜花数量：{{item.flowers_history}}</div>
          </div>
        </div>
      </div>
      <empty-tip v-if="showEmptyTip"></empty-tip>
      <a class="load-more" v-if="showNoMore && currentNav === 1">没有更多了</a>
      <a class="load-more" v-if="showLoadMore && currentNav === 1">加载中...</a>
    </div>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'
import mixins from 'comp/mixins'
import EmptyTip from 'comp/empty-tip'

export default {
  mixins: [mixins],
  components: {
    EmptyTip
  },
  data () {
    return {
      icons: {
        menuBg: `${sourceDomain}/menu-bg.png`,
      },
      resultList: [],
      currentNav: 0,
      playerInfo: {
        account: {}
      },
      ads: [],
      page: 1,
      showEmptyTip: false,
      showNoMore: false,
      showLoadMore: false,
      rank: ''
    }
  },
  computed: {
    menuBg () {
      return `background-image: url(${this.icons.menuBg});`
    }
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    // 好友榜才要分页
    if (this.showLoadMore && this.currentNav === 1) {
      this.getPageData()
    }
  },
  mounted () {
    this.resetData()
    this.getPageData()
    this.getPlayerInfo()
    this.getAds()
  },
  methods: {
    async getPlayerInfo () {
      const ret = await this.$store.dispatch('getPlayerInfo')
      this.playerInfo = ret
    },
    async getPageData () {
      let page = this.page
      let res = []
      if (this.currentNav === 0) {
        // 全国榜
        res = await this.$store.dispatch('getAllRank', {
          page,
          rows: 30
        })
      } else if (this.currentNav === 1) {
        // 好友榜
        res = await this.$store.dispatch('getFriendRank', {
          page,
          rows: 30
        })
      }
      const arr1 = this.resultList
      const arr2 = res.data.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 暂无记录
        this.showEmptyTip = true
      } else {
        if (arr2.length < 30) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.resultList = arr1.concat(arr2)
      this.page = ++page
      this.rank = res.data.rank
    },
    onRankMenuClick (i) {
      this.currentNav = i
      this.resultList = []
      this.page = 1
      this.showEmptyTip = false
      this.showNoMore = false
      this.showLoadMore = false
      this.getPageData()
    },
    onGoHome () {
      wx.navigateBack()
    },
    /**
     * 点击跳转其他人店铺
     */
    onListClick (item) {
      wx.navigateTo({
        url: `/pages/index/main?playerId=${item.player_id}`,
      })
    },
    /**
     * 获取广告图
     */
    async getAds () {
      const ret = await this.$store.dispatch('getAdvertise')
      this.ads = ret.data && ret.data.list
    }
  },
  onShareAppMessage () {
    return {
      title: '免费送你一瓶阿道夫洗发水，赶快来领取吧！',
      path: `/pages/index/main?playerId=${this.playerInfo.account.player_id}`
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-rank {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background: url("../../../static/images/wall-bg.png") repeat center center;
    background-size: 72rpx 60rpx;
  }
  .personal {
    display: flex;
    align-items: center;
    padding: 8rpx 38rpx 8rpx 80rpx;
    background-color: rgba(0, 0, 0, 0.73);
    .avatar {
      img {
        display: block;
        width: 98rpx;
        height: 98rpx;
        background-color: #422d13;
      }
    }
    .detail {
      flex: 1;
      padding-left: 20rpx;
      .title {
        font-size: 29rpx;
        color: #fff;
        line-height: 1.0;
      }
      &-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12rpx;
        .btn {
          display: inline-block;
          background-color: #e24040;
          color: #fff;
          font-size: 21rpx;
          height: 32rpx;
          line-height: 32rpx;
          border-radius: 10rpx 10rpx;
          padding: 0 18rpx;
        }
        .rank {
          font-size: 21rpx;
          color: #fff;
        }
      }
    }
  }
  .banner {
    background-color: #fef7ef;
    swiper {
      height: 340rpx;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .nav {
    position: relative;
    background-color: #fef7ef;
    &-border {
      position: absolute;
      top: -38rpx;
      left: 0;
      width: 100%;
      height: 55rpx;
      background-repeat: no-repeat;
      background-position: top center;
      background-size: contain;
    }
    &-inner {
      display: flex;
      justify-content: space-between;
      width: 364rpx;
      margin: 0 auto;
      padding-top: 20rpx;
      line-height: 46rpx;
      font-size: 23rpx;
      color: #260000;
      .active {
        font-weight: bold;
        border-bottom: 3rpx solid #260000;
      }
    }
  }
  .intro {
    display: flex;
    align-items: center;
    padding: 15rpx 0 0 100rpx;
    p {
      font-size: 19rpx;
      color: #311f1f;
      line-height: 44rpx;
    }
    i {
      display: block;
      width: 54rpx;
      height: 44rpx;
      background: url("../../../static/images/rank/share.png") no-repeat center center;
      background-size: contain;
      margin-left: 10rpx;
    }
    button {
      padding: 0;
      background-color: transparent;
      &::after {
        display: none;
      }
    }
  }
  .total {
    font-size: 19rpx;
    color: #991a10;
    line-height: 26rpx;
    padding-left: 100rpx;
    padding-bottom: 23rpx;
  }
  .big-list {
    display: flex;
    justify-content: center;
    .list-item {
      width: 278rpx;
      &:first-child {
        margin-right: 25rpx;
      }
      .image {
        position: relative;
        background-color: rgba(255, 255, 255, 0.73);
        border-radius: 17rpx;
        height: 278rpx;
        img {
          display: block;
          width: 278rpx;
          height: 278rpx;
          border-radius: 17rpx;
        }
        span {
          position: absolute;
          top: 9rpx;
          left: 9rpx;
          width: 45rpx;
          height: 45rpx;
          border-radius: 50% 50%;
          background-color: #e24040;
          color: #fff;
          font-size: 33rpx;
          line-height: 45rpx;
          text-align: center;
        }
      }
      .detail {
        padding: 6rpx 8rpx;
        .name {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #260000;
          i {
            display: block;
            width: 34rpx;
            height: 34rpx;
            background-color: #e24040;
            border-radius: 50% 50%;
            margin-right: 8rpx;
          }
        }
        .text {
          font-size: 19rpx;
          color: #301803;
          padding-top: 8rpx;
          padding-left: 42rpx;
        }
      }
    }
  }
  .small-list {
    margin: 0 89rpx;
    padding-bottom: 16rpx;
    .list-item {
      display: flex;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.37);
      border-radius: 8rpx;
      padding: 10rpx 20rpx;
      margin-top: 8rpx;
      .order {
        font-size: 35rpx;
        color: #fff;
        margin-right: 13rpx;
      }
      .image {
        margin-right: 20rpx;
        img {
          display: block;
          width: 88rpx;
          height: 88rpx;
          border-radius: 8rpx;
          background-color: #fff;
        }
      }
      .detail {
        padding: 6rpx 0;
        color: #fff;
        .name {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          i {
            display: block;
            width: 34rpx;
            height: 34rpx;
            background-color: #e24040;
            border-radius: 50% 50%;
            margin-right: 8rpx;
          }
        }
        .text {
          font-size: 19rpx;
          padding-top: 8rpx;
          padding-left: 42rpx;
        }
      }
    }
  }
  .load-more {
    font-size: 24rpx;
    color: #991a10;
    text-align: center;
    padding: 30rpx 0 70rpx;
  }
}
</style>
